import React, { useState } from 'react';
import { 
  AnimatedContainer, 
  HoverCard, 
  PulseAnimation, 
  GradientBackground, 
  SpinAnimation, 
  FadeTransition, 
  ElasticButton 
} from './index';
import { Card, Row, Col, Space, Typography, Switch } from 'antd';
import { 
  RocketOutlined, 
  StarOutlined, 
  HeartOutlined, 
  ThunderboltOutlined 
} from '@ant-design/icons';

const { Title, Text } = Typography;

const UIDemo: React.FC = () => {
  const [fadeVisible, setFadeVisible] = useState(true);
  const [pulseActive, setPulseActive] = useState(true);

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>UI 组件演示</Title>
      <Text>展示通用动画和样式组件的使用方法</Text>
      
      <Row gutter={[24, 24]} style={{ marginTop: '24px' }}>
        {/* AnimatedContainer 示例 */}
        <Col span={12}>
          <AnimatedContainer>
            <Card title="AnimatedContainer" bordered={false}>
              <Text>这是一个带动画效果的容器组件，内容会以淡入和上滑动效出现。</Text>
            </Card>
          </AnimatedContainer>
        </Col>
        
        {/* HoverCard 示例 */}
        <Col span={12}>
          <HoverCard>
            <Card title="HoverCard" bordered={false}>
              <Text>将鼠标悬停在此卡片上，会看到缩放和阴影效果。</Text>
            </Card>
          </HoverCard>
        </Col>
        
        {/* PulseAnimation 示例 */}
        <Col span={12}>
          <Card 
            title={
              <Space>
                <span>PulseAnimation</span>
                <Switch 
                  checked={pulseActive} 
                  onChange={setPulseActive} 
                  size="small" 
                />
              </Space>
            } 
            bordered={false}
          >
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <PulseAnimation>
                <div style={{
                  width: '60px',
                  height: '60px',
                  borderRadius: '50%',
                  background: 'linear-gradient(135deg, #61dca3, #1890ff)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: 'white',
                  fontSize: '24px'
                }}>
                  <HeartOutlined />
                </div>
              </PulseAnimation>
            </div>
            <Text>这是一个脉冲动画组件，可以为元素添加脉冲效果。</Text>
          </Card>
        </Col>
        
        {/* GradientBackground 示例 */}
        <Col span={12}>
          <GradientBackground 
            colors={['rgba(97, 220, 163, 0.2)', 'rgba(24, 144, 255, 0.2)']}
            animate={true}
          >
            <Card title="GradientBackground" bordered={false}>
              <Text>这是一个渐变背景组件，支持线性和径向渐变，并可添加动画效果。</Text>
            </Card>
          </GradientBackground>
        </Col>
        
        {/* SpinAnimation 示例 */}
        <Col span={12}>
          <Card title="SpinAnimation" bordered={false}>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <SpinAnimation speed={3}>
                <div style={{
                  width: '60px',
                  height: '60px',
                  borderRadius: '50%',
                  background: 'linear-gradient(135deg, #61dca3, #1890ff)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: 'white',
                  fontSize: '24px'
                }}>
                  <RocketOutlined />
                </div>
              </SpinAnimation>
            </div>
            <Text>这是一个旋转动画组件，可以让元素持续旋转。</Text>
          </Card>
        </Col>
        
        {/* FadeTransition 示例 */}
        <Col span={12}>
          <Card 
            title={
              <Space>
                <span>FadeTransition</span>
                <Switch 
                  checked={fadeVisible} 
                  onChange={setFadeVisible} 
                  size="small" 
                />
              </Space>
            } 
            bordered={false}
          >
            <div style={{ 
              height: '100px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              border: '1px dashed #ccc',
              borderRadius: '6px',
              marginBottom: '16px'
            }}>
              <FadeTransition isVisible={fadeVisible}>
                <div style={{
                  padding: '12px 24px',
                  background: 'linear-gradient(135deg, #61dca3, #1890ff)',
                  color: 'white',
                  borderRadius: '6px',
                  fontWeight: 'bold'
                }}>
                  淡入淡出内容
                </div>
              </FadeTransition>
            </div>
            <Text>这是一个淡入淡出过渡组件，可以控制元素的显示和隐藏动画。</Text>
          </Card>
        </Col>
        
        {/* ElasticButton 示例 */}
        <Col span={24}>
          <Card title="ElasticButton" bordered={false}>
            <div style={{ 
              display: 'flex', 
              gap: '16px', 
              flexWrap: 'wrap',
              padding: '20px'
            }}>
              <ElasticButton onClick={() => console.log('点击了主按钮')}>
                主要按钮
              </ElasticButton>
              
              <ElasticButton 
                whileHoverScale={1.1} 
                whileTapScale={0.9}
                style={{
                  padding: '10px 20px',
                  border: '1px solid #1890ff',
                  borderRadius: '6px',
                  background: 'transparent',
                  color: '#1890ff',
                  fontWeight: 'bold',
                  fontSize: '14px'
                }}
              >
                次要按钮
              </ElasticButton>
              
              <ElasticButton 
                disabled 
                style={{
                  padding: '10px 20px',
                  border: 'none',
                  borderRadius: '6px',
                  background: '#f5f5f5',
                  color: 'rgba(0, 0, 0, 0.25)',
                  fontWeight: 'bold',
                  fontSize: '14px'
                }}
              >
                禁用按钮
              </ElasticButton>
            </div>
            <Text>这是一个弹性动画按钮组件，具有悬停和点击的弹性效果。</Text>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default UIDemo;